	//++++++++++++ Es el encargado de mostrar un contexto de la vista principal	
	
	//PARAMETROS
	//<webglObject>: objeto que representa al canvas donde se a�adira el contexto
	//<camera>: camara a renderizar en este contexto
	//
	//<posX>: posicion en el ejeX donde se incrustara el contexto (OBS: el inicio de coordenadas esta abajo a la izquierda)
	//<posY>: posicion en el ejeY donde se incrustara el contexto (OBS: el inicio de coordenadas esta abajo a la izquierda)
	//<width>: ancho del contexto
	//<height>: alto del contexto
	function Contexto(parameters){
		
		if (!parameters.webglObject || !parameters.camera) return false;
		
		var _this = this;
		
		var webglObject = parameters.webglObject;
		
		var camera = parameters.camera; //se asume que la camara tiene un control de tipo Fly
		camera.position.y *= 3; 
		
		var posX = parameters.posX || 0;
		var posY = parameters.posY || 0; 
		var width = parameters.width || viewportWidth/2;
		var height = parameters.height || viewportHeight/2;
	
		var domContainerWebgl = $(webglObject.getDomContainer());//contenedor donde se realiza el renderizado principal (webgl)
		var domElement = $("#divContexto") //div para mostrar la region donde se renderiza el contexto
		
		var _sliding = false;//se esta arrastrando el slider del zoom
		var seMuestraPanelZoom = false;//se esta mostrando el div que muestra el area donde se renderiza el contexto?
		
		var anchoBorde = 2;//el ancho de la linea del borde del div, influye en el posicionamiento del div
		
		var panel = null;
		
		
		crearElementosDelPanel();//creamos el panel del zoom, el slider, el boton para cerrar el contexto ...
		
		
		
		
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		//++ CREAMOS ELEMENTOS PARA EL DIV DEL AREA DE CONTEXTO ++
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		function crearElementosDelPanel(){
			
			//++++++ estilo para el div del contexto ++++++++++
			domElement.css('display','none');
			domElement.css('position','absolute');
			domElement.css('bottom',posY);
			domElement.css('left',posX);
			domElement.css('width',width-anchoBorde);
			domElement.css('height',height-anchoBorde);
			domElement.css('border-color',"#555555");
			domElement.css('border-style',"groove");
			domElement.css('border-width',anchoBorde+"px");
			domElement.css('z-index',10);//TODO
			
			
			//++++++ panel para mostrar el slider del zoom (vertical) ++++++++++
			panel = $("<div id='ctxPanelSlider'>").appendTo($("#contexto"))
			.css({'position':'absolute',
				'display':'none',
				'left':0,
				'bottom':0,
				'width':(width-anchoBorde)+"px",
				'height':30+"px",
				'background-color': '#ccc',
				//'height': (height-anchoBorde),
				'text-align':'center'})
				.mouseleave(function(event){
					if (!_sliding) $(this).fadeOut();
				});
			
			
			//++++++ boton para cerrar el contexto ++++++++++++
			var btnCerrar = $("#btnCerrarPanelContexto")
			.click(function(){
				 WEBGL.toggleRenderizarContexto();
				_this.visible(false);
				$("#btnAbrirPanelContexto").css("display","inline");
			});
			
			
			
			
			
			//++++++ boton para abrir el contexto. en el area de botones flotantes (arriba a la derecha) ++++++++++++
			$("#btnAbrirPanelContexto").click(function(){
				_this.visible(true); 
				 WEBGL.toggleRenderizarContexto();
				 $(this).css("display","none");
			});
			
			
			//++++++ slider para el zoom ++++++
			var slider = $('<div id="sliderZoom">')
					.css({"margin-top" : 10+'px'})
					.appendTo(panel)	
					.slider({
						orientation: "horizontal",
						range: "min",
						min: CONSTANTS.SLIDER_CONTEXTO_MIN_VALUE, //var global
						max: CONSTANTS.SLIDER_CONTEXTO_MAX_VALUE, //var global
						value: camera.position.y,
						slide: function( event, ui ) {
							panel.show();
							camera.position.y = ui.value;  
						},
						start: function(){
							_sliding = true;
							$(webglObject.getDomContainer()).css({'pointer-events' : 'none'});
							
						},
						stop: function(){$(webglObject.getDomContainer()).css({'pointer-events' : ''});
						_sliding = false;
						}
					});
			
		};
		
		
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		//++++++++++++++++++ MOUSE MOVE +++++++++++++++++++++++++
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		domElement.mousemove(function(event){
			
			var y = event.pageY - $(this).offset().top;	
			if (y > (height-40)){
				if (!seMuestraPanelZoom){					
					$(panel).fadeIn();
					seMuestraPanelZoom = true;
				}
			}else{
				seMuestraPanelZoom = false;
			}
		});

		
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		//++++++++++++++++++++++ VISIBLE +++++++++++++++++++++++++
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		//para mostrar u ocultar el contexto
		this.visible = function(status){
			if (status){
				$(domElement).css("display","inline");
				$("#btnAbrirPanelContexto").css("display","none");
			}
			else{
				$(domElement).css("display","none");
				$("#btnAbrirPanelContexto").css("display","inline");
			}
			
			 COOKIE_CONTROLLER.saveValue('START_RENDERING_CONTEXT',status);
		};
		
		
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		//++++++++++++++++++++++ RESIZE ++++++++++++++++++++++++++
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		//actualizacion del contexto cuando se cambia el tamaño de la pantalla
		this.resize = function(){
			screenWidth =  $(domContainerWebgl).width();
			screenHeight = $(domContainerWebgl).height();
			posX = screenWidth - width - 10;
			domElement.css('left',posX);
			domElement.css('bottom',posY);
		};
		
		
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		//++++++++++++++++++++++ ANIMATE +++++++++++++++++++++++++
		//++++++++++++++++++++++++++++++++++++++++++++++++++++++++
		//si se esta mostrando el contexto, se debe renderizar el mismo, en el bucle principal de renderizado.
		this.animate = function(){		
			screenWidth =  $(domContainerWebgl).width();
			screenHeight = $(domContainerWebgl).height();
			camaraWebglObject = webglObject.getCamera();
			renderer = webglObject.getRenderer();
			scene = webglObject.getScene();
						
			//parametros para la camara del contexto
			camera.position.x = camaraWebglObject.position.x;
			//camera.position.y = camaraWebglObject.position.y*3;
			camera.position.z = camaraWebglObject.position.z;
			camera.aspect = width/height;
			
			camera.updateProjectionMatrix();
			camera.controls.update();
			
			renderer.setScissor( posX, posY, width, height );
			renderer.setViewport( posX, posY, width, height );
			renderer.render( scene, camera );
			
			//seteo la configuracion para que el renderizado del resto de la escena ocupe todo el viewport
			renderer.setScissor(0, 0, screenWidth, screenHeight );
			renderer.setViewport(0, 0, screenWidth, screenHeight );
			
			camaraWebglObject.aspect = screenWidth/screenHeight;
			camaraWebglObject.updateProjectionMatrix();					
		};
		
	};/*fin objeto contexto*/